<template>
  <div class="login-container">
    <div class="kht">跨行票据贴现</div>
    <el-form ref="formLogin" :model="formLogin" class="login-formg">
      <h2 class="login-title">账号登录</h2>
      <el-form-item label="" style="margin-top: 25px">
        <el-input
          v-model="formLogin.username"
          placeholder="请输入用户名"
          @keyup.enter.native="handleLogin"
          auto-complete="off"
        >
          <template slot="prepend">
            <img
              src="../../assets/toux.png"
              style="width: 14px; height: 15px"
            />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          type="password"
          v-model="formLogin.password"
          placeholder="请输入密码"
          auto-complete="off"
          @keyup.enter.native="handleLogin"
        >
          <template slot="prepend">
            <img src="../../assets/suo.png" style="width: 14px; height: 15px" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :span="24">
          <el-col :span="16">
            <el-input
              size="small"
              @keyup.enter.native="handleLogin"
              :maxlength="code.len"
              v-model="formLogin.code"
              auto-complete="off"
              placeholder="请输入验证码"
            >
              <i slot="prefix" class="icon-yanzhengma"></i>
            </el-input>
          </el-col>
          <el-col :span="8">
            <div class="login-code">
              <span
                class="login-code-img"
                @click="refreshCode"
                v-if="code.type == 'text'"
                >{{ code.value }}</span
              >
              <img
                :src="code.src"
                class="login-code-img"
                @click="refreshCode"
                v-else
              />
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click.native.prevent="handleLogin"
          >登录</el-button
        >
      </el-form-item>
      <el-form-item style="margin-left: 3px">
        <span style="color: #0075ff; cursor: pointer" @click="wjposs">
          忘记密码</span
        >
      </el-form-item>
      <el-form-item style="margin-left: 91px; margin-top: -62px">
        <span @click="zhucss" style="color: #0000ff;cursor: pointer">注册</span>
      </el-form-item>
    </el-form>
  </div>
</template>
  <script>
import { randomLenNum, encryption } from "@/common/util";
import qs from "qs";
import { route1, route2, route3 } from "@/router/index.js";
import store from '@/store'
export default {
  data() {
    return {
      formLogin: {
        username: "",
        password: "",
        code: "",
        redomStr: "",
        scope: "server",
        grant_type: "password",
        role:""
      },
      code: {
        src: "/code",
        value: "",
        len: 4,
        type: "image",
      },
      passwordType: "password",
    };
  },
  created() {
    this.refreshCode();
  },
  methods: {
    // 得到验证码图片
    refreshCode() {
      this.formLogin.code = "";
      this.formLogin.randomStr = randomLenNum(this.code.len, true);
      this.code.type === "text"
        ? (this.code.value = randomLenNum(this.code.len))
        : (this.code.src = `${this.codeUrl}?randomStr=${this.formLogin.randomStr}`);
    },
    //忘记密码
    wjposs() {
      this.$router.push({ path: "/fontPage" });
    },
    zhucss(){
        this.$router.push({ path: "/register" });
    },
    handleLogin() {
      this.$refs.formLogin.validate((valid) => {
        let rad = this.$route.query.rad;
        let clientType = localStorage.getItem('clientType')
         store.commit('permission/SET_Client', clientType)
         this.formLogin.roleId=clientType;
      
        if (clientType == 1) {
          if (valid) {
            this.$store
              .dispatch("login", this.formLogin)
              .then(() => {
                // console.log(data.data.msg,'data.data.msg')
                // this.$router.push({ path: this.tagWel.value });
                this.$router.addRoutes(route1);
                this.$router.push({ path: "/NewsAlert" });
              })
              .catch(() => {
                this.$message.error("登录失败,请联系管理员");
                this.refreshCode();
              });
          }
        } else if (clientType == 2) {
          
          if (valid) {
            this.$store
              .dispatch("login", this.formLogin)
              .then(() => {
                this.$router.addRoutes(route2);
               // this.$router.push({ name: "CustomerHomePage" });
                  this.$router.push({ name: "orderzx" });
              })
              .catch(() => {
                this.$message.error("登录失败,请联系管理员");
                this.refreshCode();
              });
          }
        } else if (clientType == 3) {
          if (valid) {
            this.$store
              .dispatch("login", this.formLogin)
              .then(() => {
                this.$router.addRoutes(route3);
                this.$router.push({ name: "MageHomePage" });
              })
              .catch(() => {
                this.$message.error("登录失败,请联系管理员");
                this.refreshCode();
              });
          }
        } else if (clientType == undefined) {
          if (valid) {
            this.$store
              .dispatch("login", this.formLogin)
              .then(() => {
                // console.log(data.data.msg,'data.data.msg')
                // this.$router.push({ path: this.tagWel.value });
                this.$router.addRoutes(route1);
                this.$router.push({ path: "/NewsAlert" });
              })
              .catch(() => {
                // debugger;
                // this.$message.error("登录失败");
                this.refreshCode();
              });
          }
        }
      });
    },
  },
};
</script>

<style >
html,
body {
  width: 100%;
  height: 100%;
}

/* 背景 */
.login-container {
  height: 100%;
  background: url("../../assets/dlbj.jpg") no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  /* background-color: #303133; */
}

.kht {
  height: 28px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 260px;
}
.login-formg {
  /* width: 350px; */
  margin: 0 auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
  background: #ffffff;
  box-shadow: 0px 23px 21px 3px rgba(8, 2, 3, 0.17);
  border-radius: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login-formg .el-form-item__content {
  margin-left: 0px !important;
}
.login-formg .el-button--primary {
  width: 271px;
}
/* 标题 */
.login-title {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #051232;
  text-align: center;
}
</style> 